<script setup>
import { ref, onMounted } from "vue"
import Card from "./Card.vue"

const weatherData = ref({
  location: "北京市",
  temperature: 22,
  weather: "晴",
  windDirection: "东北风",
  windPower: "3级",
  humidity: 45,
  airQuality: "优",
  airQualityIndex: 35,
  icon: "sunny",
})

const expanded = ref(false)

// 获取天气图标
const getWeatherIcon = (weather) => {
  const iconMap = {
    晴: "fas fa-sun",
    多云: "fas fa-cloud",
    阴: "fas fa-cloud",
    小雨: "fas fa-cloud-rain",
    中雨: "fas fa-cloud-showers-heavy",
    大雨: "fas fa-cloud-showers-heavy",
    雪: "fas fa-snowflake",
    雾: "fas fa-smog",
  }
  return iconMap[weather] || "fas fa-sun"
}

// 获取空气质量颜色
const getAirQualityColor = (aqi) => {
  if (aqi <= 50) return "#52c41a"
  if (aqi <= 100) return "#faad14"
  if (aqi <= 150) return "#fa8c16"
  if (aqi <= 200) return "#f5222d"
  if (aqi <= 300) return "#722ed1"
  return "#eb2f96"
}

// 获取空气质量等级
const getAirQualityLevel = (aqi) => {
  if (aqi <= 50) return "优"
  if (aqi <= 100) return "良"
  if (aqi <= 150) return "轻度污染"
  if (aqi <= 200) return "中度污染"
  if (aqi <= 300) return "重度污染"
  return "严重污染"
}

// 模拟获取天气数据
const fetchWeatherData = async () => {
  try {
    // 这里可以调用真实的天气API
    // 目前使用模拟数据
    await new Promise((resolve) => setTimeout(resolve, 5000))

    weatherData.value = {
      location: "北京市",
      temperature: Math.floor(Math.random() * 30) + 10,
      weather: ["晴", "多云", "阴", "小雨"][Math.floor(Math.random() * 4)],
      windDirection: ["东北风", "东南风", "西南风", "西北风"][Math.floor(Math.random() * 4)],
      windPower: Math.floor(Math.random() * 6) + 1 + "级",
      humidity: Math.floor(Math.random() * 60) + 30,
      airQuality: getAirQualityLevel(35),
      airQualityIndex: 35,
      icon: "sunny",
    }
  } catch (error) {
    console.error("获取天气数据失败:", error)
  }
}

onMounted(() => {
  fetchWeatherData()
})
</script>

<template>
  <Card class="weather-widget" :class="{ expanded }" @click="expanded = !expanded">
    <!-- 折叠状态 -->
    <div v-if="!expanded" class="collapsed-view">
      <div class="location">
        <i class="fas fa-map-marker-alt"></i>
        <span>{{ weatherData.location }}</span>
      </div>
      <div class="temp-and-weather">
        <span class="temp-value">{{ weatherData.temperature }} °C</span>
        <span class="weather-text"
          ><i :class="getWeatherIcon(weatherData.weather)" class="weather-icon"></i>&nbsp;{{
            weatherData.weather
          }}</span
        >
      </div>
    </div>

    <!-- 展开状态 -->
    <div v-else class="expanded-view">
      <div class="weather-content">
        <div class="location">
          <i class="fas fa-map-marker-alt"></i>
          <span>{{ weatherData.location }}</span>
        </div>

        <div class="main-weather">
          <div class="temperature">
            <span class="temp-value">{{ weatherData.temperature }}</span>
            <span class="temp-unit">°C</span>
          </div>
          <div class="weather-info">
            <i :class="getWeatherIcon(weatherData.weather)" class="weather-icon"></i>
            <span class="weather-text">{{ weatherData.weather }}</span>
          </div>
        </div>

        <div class="weather-details">
          <div class="detail-item">
            <i class="fas fa-wind"></i>
            <span>{{ weatherData.windDirection }} {{ weatherData.windPower }}</span>
          </div>
          <div class="detail-item">
            <i class="fas fa-tint"></i>
            <span>湿度 {{ weatherData.humidity }}%</span>
          </div>
          <div class="detail-item">
            <i class="fas fa-leaf"></i>
            <span
              >空气质量
              <span
                class="air-quality"
                :style="{ color: getAirQualityColor(weatherData.airQualityIndex) }">
                {{ weatherData.airQuality }}
              </span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </Card>
</template>

<style scoped>
.weather-widget {
  padding: 15px;
  cursor: pointer;
  min-height: 60px;
}

.weather-widget.expanded {
  min-height: 200px;
}

/* 折叠状态样式 */
.collapsed-view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
}

.location {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gray);
  font-size: 14px;
}

.location i {
  color: var(--secondary);
}

.temp-and-weather {
  display: flex;
  align-items: center;
  justify-items: center;
  gap: 20px;
}

.temp-and-weather .temp-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

.temp-and-weather .weather-text {
  font-size: 20px;
  color: var(--primary);
  font-weight: 500;
}

/* 展开状态样式 */
.expanded-view {
  animation: expandIn 0.3s ease;
}

@keyframes expandIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.expanded-view .weather-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 5px 0;
}

.expanded-view .main-weather {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(var(--bg-darker-rgb), 0.3);
}

.expanded-view .temperature {
  display: flex;
  align-items: baseline;
}

.expanded-view .temp-value {
  font-size: 48px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.expanded-view .temp-unit {
  font-size: 24px;
  color: var(--gray);
  margin-left: 5px;
}

.expanded-view .weather-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.expanded-view .weather-icon {
  font-size: 32px;
  color: var(--primary);
}

.expanded-view .weather-text {
  font-size: 16px;
  color: var(--text);
  font-weight: 500;
}

.expanded-view .weather-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.expanded-view .detail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--gray);
}

.expanded-view .detail-item i {
  width: 16px;
  color: var(--secondary);
}

.expanded-view .air-quality {
  font-weight: 600;
}

@media (max-width: 1100px) {
  .weather-widget {
    grid-column: span 2;
  }
}
</style>
